<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Circle 环形进度"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="指定线宽">
      <hips-circle
        :line-width="3"
        :value="12"
        class="circle-1"
      >
        12 %
      </hips-circle>
    </demo-block>

    <demo-block title="指定填充色">
      <hips-circle
        :line-width="4"
        :value="12"
        class="circle-1"
        fill-color="yellow"
      >
        12 %
      </hips-circle>
    </demo-block>

    <demo-block title="指定直径">
      <hips-circle
        v-model="sliderValue"
        :line-width="5"
        :diameter="200"
        class="circle-2"
        stroke-color="#f44336"
      >
        {{ sliderValue }}%
      </hips-circle>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';

import { Circle } from '@hips/vue-ui';

export default {
  components: {
    [Circle.name]: Circle,
  },
  mixins: [ BasicView ],
  data () {
    return {
      sliderValue: 20,
    }
  },
};
</script>

<style scoped></style>
